<template>
	<view class="bg-black" style="position: fixed;width: 260px;margin-top: -10px;">
		<view class="" style="height: 20px;">
		</view>
		<view class="banmi_flex j-b bg-black" style="height: 100vh;width: 260px; ">
			<scroll-view scroll-y="true" style="height: 100vh;" show-scrollbar="false">
				<view class="" style="width: 100%;">
					<view class="" v-for="(item,index) in menu_list" :key="index"
						v-if="item.parent_id==0||item.expand==true">
						<button :class="mane_index==index?'banmi_menu_selected':'banmi_menu'"
							:style="item.parent_id != 0 ? 'background-color: #696969;' :'' "
							@click="on_tab(index,item.url)">
							<view class="banmi_flex  " style="align-items: center;height: 50px;"
								:class="item.depth==1?'m-l-10':item.depth==2?'m-l-20':item.depth==3?'m-l-30':item.depth==4?'m-l-40':'' ">
								<icon-park v-if="item.icon" :type="item.icon" theme="outline"
									style="font-size: 20px;margin-top: 5px;" />
								<view class="yihang" style="font-size: 15px;margin-left: 15px;width: 140px;text-align: left;">
									{{item.menu_name}}
								</view>
							</view>
							<view v-if="item.children.length>0" class="" style="margin-top: 10rpx;">
								<icon-park :type="item.depth_to==true? 'down': 'right' " theme="outline"
									style="font-size: 20px;" />
							</view>
						</button>
					</view>
				</view>
				<view class="" style="height: 300px;">
				</view>
			</scroll-view>


		</view>
	</view>
</template>

<script>
	import $C from '@/common/banmi/config.js';
	import {
		buildMenus,
		getParents,
		patTree,
		getSortMenu
	} from '../../components/uni-data-menu/util.js'
	import {
		IconPark
	} from '@icon-park/vue/es/all';
	export default {
		components: {
			IconPark
		},
		data() {
			return {
				mane_index: 0,
				is_bendi: false,
				right_icon: 'right',
				right_expand_icon: 'down',
				menu_list: [],
				admin_token: '',

			}
		},
		mounted(on) {
			var that = this
			let res = this.Banmikeji.GetRequest();

			if (res.banmi_plugin) {
				return
			}
			this.admin_token = uni.getStorageSync('admin_token');
			uni.$on('banmi_login', function(data) {
				that.admin_token = uni.getStorageSync('admin_token');
				that.route_path = data.url
				that.init(0);
			})
			this.top_list = [];
			uni.$on('banmi_menu', function(data) {
				for (var i = 0; i < that.menu_list.length; i++) {
					if (that.menu_list[i]['menu_id'] == data.top_id) {
						that.mane_index = i;
						var parent_id = that.menu_list[i]['parent_id']
						that.menu_selected(parent_id);

					}

				}
			})
			var url = window.location.href;
			var route = url.split('#/pages');
			this.route_path = route[1]
			if (this.route_path != undefined) {
				this.route_path = '/pages' + this.route_path
			} else {
				this.route_path = ''
			}

			if (this.admin_token) {
				this.init(0);
			}
		},
		methods: {
			async init(type) {



				var that = this;
				let requestParams = {
					plugin_id: 0
				};
				const ret = await this.Banmikeji.admin_menu_list(requestParams);

				if (ret.status == 200) {
					var menu_list = ret.data.role_list;
					this.onqueryload(menu_list);
				}
			},

			mergeAt(toInsert, startIndex, sourceArray = []) {

				const array = [...sourceArray];


				array.splice(startIndex, toInsert.length, ...toInsert);

				return array;
			},
			//多级树
			onqueryload(data) {

				let that = this;
				for (var i = 0; i < data.length; i++) {
					let item = data[i]
					const depth = getParents(data, item.menu_id)
					item.name = item.name
					item.depth = depth;

					item.expand = false;
					item.right = 'right'


					item.depth_to = false;
				}

				const menuTree = getSortMenu(data)

				const sortMenus = []
				patTree(menuTree, sortMenus)
				data.length = 0;
				data.push(...sortMenus)



				this.menu_list = data //仅导出当前页

				let url = this.Banmikeji.getUrlParams();
				try {
					that.menu_id = url.id
				} catch (e) {
					//TODO handle the exception
				}

				var menu_list = data;
				uni.setStorageSync('menu_list', menu_list);
				//已选中的菜单
				if (this.menu_id) {
					this.menu_list.forEach(function(item, index, arr) {
						var id = item['menu_id'];
						if (id == that.menu_id) {
							that.mane_index = index;
							var parent_id = item['parent_id']

							that.menu_selected(parent_id, item['plugin_catalogue']);
							that.top_list.push(item);
							uni.$emit('banmi_top', {
								top_list: that.top_list,
								top_id: item['menu_id'],
								find: item
							});
						}
					});


				}
			},
			menu_selected(parent_id, plugin_catalogue) {

				for (var i = 0; i < this.menu_list.length; i++) {
					if (parent_id == this.menu_list[i]['menu_id']) {
						var parent_ids = this.menu_list[i]['parent_id']
						this.menu_list[i]['depth_to'] = true;
						if (parent_ids > 0) {
							this.menu_selected(parent_ids);
						}
					}
					if (parent_id == this.menu_list[i]['parent_id'] || plugin_catalogue == this.menu_list[i][
							'parent_id'
						]) {
						this.menu_list[i]['expand'] = true;
					}
				}
			},

			GetRequest2(key) {
				var url = window.location.href;
				var theRequest = new Object();
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
					}
				}
				var value = theRequest[key];
				return value;
			},
			on_tab(index, url) {


				let that = this;
				var num = this.menu_list[index]['children'].length
				var id = this.menu_list[index]['menu_id'];
				if (num == 0) { //没有二级列表
					this.mane_index = index;
					var plugin_id = this.menu_list[index]['plugin_id']
					var url_local = this.menu_list[index]['url_local']
					var catalogue = this.menu_list[index]['plugin_catalogue']
 
					if (url_local == 1 && this.Banmikeji.is_env() != false) {

						url = '/pages/banmi/admin_plugin_view';
					}


					if (url.indexOf("?") != -1) {
						var url = url + '&id=' + id + '&catalogue=' + catalogue + '&plugin_id=' + plugin_id
					} else {
						var url = url + '?id=' + id + '&catalogue=' + catalogue + '&plugin_id=' + plugin_id
					}
					uni.navigateTo({
						url: url
					})
					//顶部已打开的导航
					var type = 0;
					for (var i = 0; i < this.top_list.length; i++) {
						if (this.top_list[i]['menu_id'] == id) {
							var type = 1;
						}
					}
					if (type == 0) {
						this.top_list.push(this.menu_list[index]);
					}
					uni.$emit('banmi_top', {
						top_list: this.top_list,
						top_id: id,
						find: this.menu_list[index]
					});
					return
				}
				var parent_id = this.menu_list[index]['menu_id']; //我的id
				var expand = this.menu_list[index]['expand'];
				var menu_id = this.menu_list[index]['parent_id']; //我的上级
				var depth = this.menu_list[index]['depth']; //层级
				this.menu_list[index]['depth_to'] = !this.menu_list[index]['depth_to'];
				this.menu_list.forEach(function(item, index, arr) {
					if (item['expand'] == true) { //已展开，闭合
						if (parent_id != item['menu_id'] && item['parent_id'] != menu_id && depth <
							2) {
							item['expand'] = false;
						} else {
							if (item['parent_id'] == parent_id) {
								item['expand'] = false;
							}
						}
					} else {
						item['expand'] = item['parent_id'] == parent_id ? true : false;
					}

					if (menu_id == 0 && menu_id != item['menu_id'] && parent_id != item['menu_id']) {
						item['depth_to'] = false;
					}
					if (item['depth_to'] && menu_id > 0) {
						if (menu_id == item['parent_id'] && parent_id != item['menu_id']) {
							item['depth_to'] = false;
						}
					}
					arr[index] = item;
				});
				this.$forceUpdate()
			},
		},
	}
</script>

<style lang="scss">
	/deep/ ::-webkit-scrollbar {
		display: block;
		width: 0px !important;
		height: 0px !important;
	}

	button::after {
		border: none;
	}

	button {
		border-radius: 0;
	}

	button {
		background-color: #313a46;
	}

	.banmi_menu_selected {
		display: flex !important;
		justify-content: space-between;
		padding: 0px 30px 0 30px;
		height: 50px;
		background-color: #1E90FF !important;
		color: #fff;
		font-weight: 600;
		align-items: center !important;

	}

	.banmi_menu {
		padding: 0px 30px 0 30px;
		display: flex;
		justify-content: space-between;
		align-items: center !important;
		color: #fff;
		height: 50px;
		font-weight: 600;

	}
</style>